<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test0"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <script src="../React-js/prop-types.js" type="text/javascript"></script>
    <script type="text/babel">
        /*
            需求：自定义用来显示一个人员信息的组件
            1. 姓名-必传-字符串-默认/无
            2. 性别-非必传-字符串 -默认/男
            3. 年龄-非必传-数字 -默认/18
        */
         class Person extends React.Component{
            render(){
                // props 是只读的
                const {name,sex,age} = this.props
                // this.props.name = 'Jerry' // 报错
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
            }
        }
        Person.propTypes = {
            // react 15版本写法 React.PropTypes
            // name:React.PropTypes.string.isRequired
            // react 16版本写法 PropTypes不再内置于React中 需要单独引入prop-types库
            name:PropTypes.string.isRequired, // 必传且为字符串
            sex:PropTypes.string, // 非必传 字符串
            age:PropTypes.number, // 非必传 数字
            //函数限制
            sayHi:PropTypes.func // 非必传 必为函数
        }
        // 设置默认属性
        Person.defaultProps = {
            sex:'男D',
            age:18
        }
        ReactDOM.render(<Person name='Tom'  age={19} sayHi={sayHi}/>,document.querySelector('#test0'))
        ReactDOM.render(<Person name='Jerry' sex='女' />,document.querySelector('#test1'))
        const p = {name:'Dog',sex:'男',age:19} // key value 相同可以简写
        ReactDOM.render(<Person {...p}/>,document.querySelector('#test2'))
        function sayHi(){
            console.log('hi');
        }
    </script>
</body>
</html>